<?php
$dateTo = new DateTime('now');
$dateFrom = new DateTime('now');
$dateFrom->sub(new DateInterval("P10D"));
$curUser = User::withId($_SESSION["userid"]);
$user = User::withId($this->streamView->model->userId);
?><div class="preview-topbar">
    <div class="mozaic-widget search_stream_info widget-stream_info" data-widget="stream_info">
        <h1 class="stream-title" data-mixpanel-context="company">
            <i class="icon-stream-type icon-stream-company-small" rel="tooltip" data-title="COLLECTING SIGNALS" data-original-title=""></i>
            <span><?php echo $this->streamView->model->name; ?></span>
        </h1>
        <?php if ($user->type != '3' && $user->type != '4') : ?>
        <div class="btn-group settings-stream-menu">
            <button data-toggle="dropdown" class="btn btn-small dropdown-toggle"><i class="icon-settings"></i><i class="icon-show-more"></i></button>
            <ul class="dropdown-menu pull-left our-dropdown">
                <li>
                    <a class="edit-object" folderid="5" streamid="71" data-type="keyword">
                        <i class="icon-edit"></i>Edit Stream
                    </a>
                </li>
                <li>
                    <a class="delete-object" streamid="71" data-type="keyword">
                        <i class="icon-delete-folder"></i>Delete Stream
                    </a>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
        <?php endif; ?>
    </div>
</div> 
<div class="viewport">
    <div class="overview" style="top: 0px;">
        <div class="action-nav-content">
            <div class="links-section"><div class="mozaic-widget action-menu-container widget-search_action_menu" data-widget="search_action_menu" >
                    <div class="action-nav-header">
                        <div id="stream-info-holder"><div class="mozaic-widget search_stream_info widget-stream_info" data-widget="stream_info" >
                                <h1 class="stream-title" data-mixpanel-context="company">
                                    <i class="icon-stream-type icon-stream-company-small" rel="tooltip" data-title="COLLECTING SIGNALS" data-original-title=""></i>
                                    <span><?php echo $this->streamView->model->name ?></span>
                                </h1>

                                <div class="btn-group settings-stream-menu">
                                    <button data-toggle="dropdown" class="btn btn-small dropdown-toggle"><i class="icon-settings"></i><i class="icon-show-more"></i></button>
                                    <?php if ($this->streamView->model->userId == $_SESSION["userid"] || $curUser->managerId == 0) : ?>
                                        <ul class="dropdown-menu pull-left our-dropdown">
                                            <li>
                                                <a class="edit-object" folderId="<?php echo $this->streamView->model->folderId; ?>" streamid="<?php echo $this->streamView->model->streamId; ?>" data-type="keyword">
                                                    <i class="icon-edit"></i>Edit Stream
                                                </a>
                                            </li>
                                            <li>
                                                <a class="delete-object" streamid="<?php echo $this->streamView->model->streamId; ?>" data-type="keyword">
                                                    <i class="icon-delete-folder"></i>Delete Stream
                                                </a>
                                            </li>
                                            <!--<li>
                                                <a class="copy-object" data-id="1000032005" data-type="keyword">
                                                    <i class="icon-copy"></i>Copy to another view
                                                </a>
                                            </li>
                                            <li>
                                                <a class="download-object" data-id="1000032005">
                                                    <i class="icon-historical"></i>Get Historical Data
                                                </a>
                                            </li>
                                            <li>
                                                <a class="customize-signals-button" data-id="1000032005" data-type="keyword">
                                                    <i class="icon-signals"></i>Signals Settings
                                                </a>
                                            </li>-->
                                        </ul>
                                    <?php endif; ?>
                                </div>
                                <div class="clear"></div>

                                <ul class="stream-filter">
                                    <li>
                                        <p>Searching for:</p>
                                        <span class="query-container"><?php echo $this->streamView->model->query ?></span>
                                        <span class="three-dots">...</span>
                                    </li>
                                    <div id="custom-sources-info-widget" class="mozaic-widget widget-custom_sources_info" data-widget="custom_sources_info" ></div>
                                </ul><div id="historical-job-info-widget" class="mozaic-widget stream-filter historical-info widget-historical_info" data-widget="historical_info" >
                                </div>
                                <ul class="stream-filter">
                                    <li>
                                        <p>Created on:</p>
                                        <span class="capitalize"><?php echo $this->streamView->model->dateCreated; ?></span>
                                    </li><li class="author-info">
                                        <p>By:</p>
                                        <img src="http://www.gravatar.com/avatar/<?php echo md5(strtolower($useremail)); ?>" class="author-avatar">
                                        <div class="author-inner-wrapper">
                                            <span class="capitalize"><?php echo $user->name; ?></span>
                                            <span class="author-role">Admin</span>
                                        </div>
                                    </li></ul>
                                <div class="clear"></div></div></div>
                        <div class="button-toggle-action_menu"><i class="icon-filter-list"></i><i class="icon-show-more"></i></div>
                        <div class="clear mt-20"></div>
                        <h5 class="action-nav-title">MAIN SECTIONS</h5>
                        <ul class="nav nav-list main-section-nav">
                            <li>
                                <div class="mozaic-widget widget-url" data-widget="url" id="mentions-link-widget">
                                    <a class="url-widget-link" href="#stream/<?php echo base64_encode($this->streamView->model->streamId) ?>">
                                        <i class="icon-main-menu"></i>
                                        <span>Mentions</span>
                                    </a>
                                    <ul class="message-action-filter">
                                          <li>
                                            <div>
                                                <a class="action-link">
                                                    <i class="icon-main-menu-favorite"></i>
                                                    <span>Favorite</span>
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                <a class="action-link">
                                                    <i class="icon-main-menu-archive"></i>
                                                    <span>Archive</span>
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                <a class="action-link">
                                                    <i class="icon-main-menu-spam"></i>
                                                    <span>Spam</span>
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                <a class="action-link">
                                                    <i class="icon-main-menu-trash"></i>
                                                    <span>Trash</span>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="mozaic-widget widget-pin_timeline" data-widget="pin_timeline" ></div>
                            </li>
                            <li class="active-section">
                                <div class="mozaic-widget widget-url" data-widget="url" id="alert-link-widget">
                                    <a class="url-widget-link" href="#alert/<?php echo base64_encode($this->streamView->model->streamId) ?>">
                                        <i class="icon-main-menu"></i>
                                        <span>Alert</span>
                                    </a>
                                </div>
                                <div class="mozaic-widget widget-pin_timeline" data-widget="pin_timeline" ></div>
                            </li>
                            <li>
                                <div id="analytics-link-widget" class="mozaic-widget widget-url" data-widget="url" >
                                    <a class="url-widget-link" href="#metrics/<?php echo base64_encode($this->streamView->model->streamId) ?>">
                                        <i class="icon-main-menu"></i>
                                        <span>Metrics</span>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div></div>
            <div class="filters-section">
                <div class="mozaic-widget widget-search_filter_list" data-widget="search_filter_list" ><h5 class="action-nav-title">FILTER THE DATA</h5>
                    <div class="btn-holder clear-filters" style="display: none;"><button class="btn btn-small"><i class="icon-clear"></i>Clear</button></div><p class="filter-type filter-type-date">date:</p>
                    <div id="date-filter-widget" class="mozaic-widget widget-date_filter" data-widget="date_filter" >
                        <div class="filter-button btn btn-large" rel="tooltip" data-original-title="Filter metrics for a day, a week or as far back as the stream creation date!">
                            <a><i class="icon-filter"></i><span id="selected_date" dateFrom="<?php echo $dateFrom->format("d-m-Y"); ?>" dateTo="<?php echo $dateTo->format("d-m-Y"); ?>" class="button-text"><?php echo $dateFrom->format("M d") . ' - ' . $dateTo->format("M d"); ?></span></a>
                        </div>
                        <div class="filter-overlay action-nav-filtering">
                            <div class="filter-container">
                                <div class="filter-container-mask calendar-container">
                                    <button id="last_week" class="btn">Last Week</button>
                                    <button id="last_month" class="btn">Last Month</button>
                                    <p class="calendar-info-text">Or select the start &amp; end date:</p>
                                    <div id="date-filter">

                                        <label for="from">From</label>
                                        <div id="from"></div>
                                        <label for="to">to</label>
                                        <div id="to"></div>
                                    </div>
                                </div>
                                <div class="btn-holder">
                                    <div class="btn filter-back-button"><i class="icon-back"></i>Back</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>

                    <p class="filter-type filter-type-language">language:</p>
                    <div id="language-filter-widget" class="mozaic-widget widget-language_filter">
                        <div class="filter-button btn btn-large" rel="tooltip" data-original-title="Filter mentions by a specific language or all languages. We support over 50 languages!">
                            <a data-value="2"><i class="icon-filter"></i><span id="selected-language" class="button-text">Vietnamese</span></a>
                        </div>
                        <div class="filter-overlay action-nav-filtering">
                            <div class="filter-container">
                                <div class="filter-container-top">
                                    <input type="text" class="search-box search-filter-box" placeholder="Language">
                                </div>
                                <div class="filter-container-mask ">
                                    <div class="scrollbar" style="height: 0px;"><div class="track" style="height: 0px;"><div class="thumb"><div class="end"></div></div></div></div>
                                    <div class="viewport">
                                        <div class="overview" style="top: 0px;">
                                            <ul class="results filter-container-list">
                                                <li data-value="0" class="back-list-link"><a class="action-color-active"><i class="icon-back-list"></i>All languages</a></li>
                                                <li data-value="2" class="back-list-link selected"><a><i class="icon-circle-list"></i>Vietnamese</a></li></ul>
                                        </div> 
                                    </div>
                                </div>
                                <div class="btn-holder">
                                    <div class="btn filter-back-button"><i class="icon-back"></i>Back</div>
                                </div>
                            </div>
                        </div></div>
                    <!--<div class="clear"></div><p class="filter-type filter-type-location">location:</p>
                    <div id="location-filter-widget" class="mozaic-widget widget-location_filter" data-widget="location_filter" >
                        <div class="filter-button btn btn-large" rel="tooltip" data-original-title="Filter mentions by all locations, top locations or a specific area. Use the down arrow next to each country to see an expanded list.">
                            <a><i class="icon-filter"></i><span class="button-text">All locations</span></a>
                        </div>
                        <div class="filter-overlay action-nav-filtering">
                            <div class="filter-container">
                                <div class="filter-container-top">
                                    <input type="text" class="search-box search-filter-box" placeholder="Location">
                                </div>
                                <div class="filter-container-mask filter_scrollbar tiny_scrollbar">
                                    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
                                    <div class="viewport">
                                        <div class="overview">
                                            <div class="filter-container-list">
                                                <ul class="results"></ul>
                                                <div class="location-lists"><div class="mozaic-widget widget-top_locations_filter" data-widget="top_locations_filter" >
                                                        <div class="available-locations">
                                                            <p class="filter-list-title">Top locations:</p>
                                                            <ul><li data-param="{&quot;country&quot;:&quot;united states&quot;}"><a href="united states"><i class="icon-circle-list"></i> united states</a></li><li data-param="{&quot;country&quot;:&quot;japan&quot;}"><a href="japan"><i class="icon-circle-list"></i> japan</a></li><li data-param="{&quot;country&quot;:&quot;thailand&quot;}"><a href="thailand"><i class="icon-circle-list"></i> thailand</a></li><li data-param="{&quot;country&quot;:&quot;indonesia&quot;}"><a href="indonesia"><i class="icon-circle-list"></i> indonesia</a></li><li data-param="{&quot;country&quot;:&quot;united kingdom&quot;}"><a href="united kingdom"><i class="icon-circle-list"></i> united kingdom</a></li></ul>
                                                        </div>
                                                    </div><div class="mozaic-widget widget-current_location" data-widget="current_location" ></div>
                                                    <p class="filter-list-title">All locations:</p>
                                                    <ul class="all-locations level-list"></ul>
                                                </div>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                                <div class="btn-holder">
                                    <div class="btn filter-back-button"><i class="icon-back"></i>Back</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div><p class="filter-type filter-type-platform">platform:</p>
                    <div id="platform-filter-widget" class="mozaic-widget widget-platform_filter" data-widget="platform_filter" >
                        <div class="filter-button btn btn-large" rel="tooltip" data-original-title="Filter mentions by all or one specific social platform/data source">
                            <a><i class="icon-filter"></i><span class="button-text">All platforms</span></a>
                        </div>
                        <div class="filter-overlay action-nav-filtering">
                            <div class="filter-container">
                                <div class="filter-container-top">
                                    <input type="text" class="search-box search-filter-box" placeholder="Platform">
                                </div>
                                <div class="filter-container-mask filter_scrollbar tiny_scrollbar">
                                    <div class="scrollbar" style="height: 0px;"><div class="track" style="height: 0px;"><div class="thumb"><div class="end"></div></div></div></div>
                                    <div class="viewport">
                                        <div class="overview" style="top: 0px;">
                                            <ul class="results filter-container-list">
                                                <li data-value="" class="back-list-link selected" style="display: none;"><a class="action-color-active"><i class="icon-back-list"></i>All platforms</a></li></ul>
                                        </div> 
                                    </div>
                                </div>
                                <div class="btn-holder">
                                    <div class="btn filter-back-button"><i class="icon-back"></i>Back</div>
                                </div>
                            </div>
                        </div></div>
                    -->
                    <div class="clear"></div><p class="filter-type filter-type-tag">tag:</p>
                    <div id="tag-filter-widget" class="mozaic-widget widget-tag_filter" data-widget="tag_filter" >
                        <div class="filter-button btn btn-large" rel="tooltip" data-original-title="Review all tagged mentions and Signals or just the ones with a specific tag.">
                            <a data-value="0"><i class="icon-filter"></i><span id="selected-tag" class="button-text">All tags</span></a>
                        </div>
                        <div class="filter-overlay action-nav-filtering">
                            <div class="filter-container">
                                <div class="filter-container-top">
                                    <input type="text" class="search-box search-filter-box" placeholder="Tag">
                                </div>
                                <div class="filter-container-mask">
                                    <div class="viewport">
                                        <div class="overview" style="top: 0px;">
                                            <ul class="results filter-container-list">
                                                <li data-value="0" class="back-list-link selected">
                                                    <a class="action-color-active">
                                                        <i class="icon-back-list"></i>
                                                        All tags
                                                    </a>
                                                </li>
                                                <?php
                                                $tags = Tag::getList();
                                                foreach ($tags as $tag) :
                                                    ?>
                                                    <li data-value="<?php echo $tag->tagId; ?>" class="back-list-link">
                                                        <a class="action-color-active">
                                                            <i class="icon-circle-list"></i>
                                                            <?php echo $tag->tagName; ?>
                                                        </a>
                                                    </li>
                                                <?php endforeach; ?>
                                            </ul>
                                        </div> 
                                    </div>
                                </div>
                                <div class="btn-holder">
                                    <div class="btn filter-back-button"><i class="icon-back"></i>Back</div>
                                </div>
                            </div>
                        </div></div>
                    <div class="clear"></div><p class="filter-type filter-type-sentiment">sentiment:</p>
                    <div id="sentiment-filter-widget" class="mozaic-widget widget-sentiment_filter" data-widget="sentiment_filter" >
                        <div class="clear"></div>
                        <div class="radio-options-sentiment"><a data-value="1" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="Positive">
                                <span>positive</span>
                                <i class="icon-positive"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_sentiment" data-value="2" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="Neutral">
                                <span>neutral</span>
                                <i class="icon-neutral"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_sentiment" data-value="3" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="Negative">
                                <span>negative</span>
                                <i class="icon-negative"></i>
                                <i class="icon-cirlce-background"></i>
                            </a></div>
                        <div class="clear"></div>
                    </div>
                    <!--
                    <div class="clear"></div><p class="filter-type filter-type-gender">gender:</p>
                    <div id="gender-filter-widget" class="mozaic-widget widget-gender_filter" data-widget="gender_filter" >
                        <div class="clear"></div>
                        <div class="radio-options-gender"><a data-name="radio_gender" data-value="male" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="Male">
                                <span>male</span>
                                <i class="icon-male"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_gender" data-value="female" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="Female">
                                <span>female</span>
                                <i class="icon-female"></i>
                                <i class="icon-cirlce-background"></i>
                            </a></div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div><p class="filter-type filter-type-reach">reach:</p>-->
                    <!--<div id="reach-filter-widget" class="mozaic-widget widget-reach_filter" data-widget="reach_filter" >
                        <div class="clear"></div>
                        <div class="radio-options-reach"><a data-name="radio_reach" data-value="XS" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="&lt; 100">
                                <span>XS</span>
                                <i class="icon-XS"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_reach" data-value="S" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="100 - 499">
                                <span>S</span>
                                <i class="icon-S"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_reach" data-value="M" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="500 - 999">
                                <span>M</span>
                                <i class="icon-M"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_reach" data-value="L" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="1000 - 4999">
                                <span>L</span>
                                <i class="icon-L"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_reach" data-value="XL" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="5000 - 9999">
                                <span>XL</span>
                                <i class="icon-XL"></i>
                                <i class="icon-cirlce-background"></i>
                            </a><a data-name="radio_reach" data-value="XXL" class="radio-filter-item btn btn-large filter-button" rel="tooltip" data-original-title="&gt; 9999">
                                <span>XXL</span>
                                <i class="icon-XXL"></i>
                                <i class="icon-cirlce-background"></i>
                            </a></div>
                        <div class="clear"></div>
                    </div>-->
                    <div class="clear"></div>
                </div></div>
            <!--<div class="actions-section">
                <div class="mozaic-widget widget-stream_export" data-widget="stream_export" >
                    <div class="data-export-section">
                        <h5 class="action-nav-title">DATA EXPORT</h5>
                        <p class="filter-type">Export mentions as CSV file.</p>
                        <button id="export-mentions" class="filter-button btn export-button"><i class="icon-export-mentions"></i>Mentions</button>
                        <button id="export-trends" class="filter-button btn export-button"><i class="icon-export-trends"></i>Trends</button>
                    </div>
                </div>
            </div>-->
        </div>
    </div>
</div>
<script>

    if ($('script[src="/Libs/jqueryui/js/jquery-ui-1.10.3.custom.min.js"]').length == 0) {
        LazyLoad.js("/Libs/jqueryui/js/jquery-ui-1.10.3.custom.min.js", loadScriptComplete);
        LazyLoad.css(["/Libs/jqueryui/css/ui-darkness/jquery-ui-1.10.3.custom.min.css"]);
    }
    else
        loadScriptComplete();

    function loadScriptComplete() {
        $('.url-widget-link').last().attr('href', "/#metrics/" + params[1]);
        $('.url-widget-link').first().attr('href', "/#stream/" + params[1]);

        $(function() {
            $("#from").datepicker({dateFormat: 'dd-mm-yy',
                onSelect: function(event) {
                    $('.filter-container-mask .btn-red').removeClass('btn-red');
                }});
            $("#to").datepicker({dateFormat: 'dd-mm-yy',
                onSelect: function(event) {
                    console.log($(this));
                    applyFilter($(this));
                }});
        });

        $('#from').datepicker("setDate", "<?php echo $dateFrom->format("d-m-Y") ?>");
        $('#to').datepicker("setDate", "<?php echo $dateTo->format("d-m-Y") ?>");

        $(document).on('click', '#last_week', function(e) {
<?php
$dateFrom = new DateTime('now');
$dateFrom->sub(new DateInterval("P7D"));
?>
            $('#from').datepicker("setDate", "<?php echo $dateFrom->format("d-m-Y") ?>");
            $('#to').datepicker("setDate", "<?php echo $dateTo->format("d-m-Y") ?>");
            $('.calendar-container .btn-red').removeClass('btn-red');
            $(this).addClass('btn-red');
            applyFilter($('#to'));
        });

        $(document).on('click', '#last_month', function(e) {
<?php
$dateFrom = new DateTime('now');
$dateFrom->sub(new DateInterval("P1M"));
?>
            $('#from').datepicker("setDate", "<?php echo $dateFrom->format("d-m-Y") ?>");
            $('#to').datepicker("setDate", "<?php echo $dateTo->format("d-m-Y") ?>");
            $('.calendar-container .btn-red').removeClass('btn-red');
            $(this).addClass('btn-red');
            applyFilter($('#to'));
        });
    }
    params = window.location.href.split('#')[1].split("/");

<?php
$dateFrom = new DateTime('now');
